<template>
  <div class="message_container"
  v-show="show">
    <div :class="['message_wrapper',this.type==='success'?'message_success':'message_faild']">
      {{message}}
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      show:false,
      message:"111111",
      type:"success"
    }
  }
}
</script>

<style scoped>
.message_container
{
  width: 50vw;
  height: 40px;
  border: 1px solid red;
  position: absolute;
  left: 35vw;
  top:-50px;
  animation: slideDowm 2s linear;
  /* background-color: white; */
}

@keyframes slideDowm {
  0%{
    transform: translateY(100%);
    opacity: 0;
  }

  60%{
    transform: translateY(150%);
    opacity: 1;
  }

  80%{
    transform: translateY(150%);
    opacity: 1;
  }

  100%{
    transform: translateY(150%);
    opacity: 1;
  }
}

.message_wrapper
{
  width: 100%;
  margin: 10px 10px;
  font-size: 18px;
  font-weight: 600;
  word-break: break-all;
}

.message_success
{
  background-color: rgb(233, 249, 235);
  color: green;
}


.message_faild
{
  background-color: rgb(255, 240, 240);
  color: red;
}
</style>